<template>
  <section class="echartBox-wrapper" :ref="id">

  </section>
</template>

<script>
import echarts from "../echarts/index";
export default {
  props: ["id", "list"],
  created() {
    console.log(this.list)
    this.$nextTick(() => {
      this.renderEchart();
    });
  },
  watch: {
    list: {
      handler(newVal) {
        if (newVal) {
          this.initData();
          this.$nextTick(() => {
            this.renderEchart();
          });
        }
      },
      immediate: true,
      deep: true,
    },
  },
  
  methods: {
    initData() {
      // console.log(this.list);
    },
    renderEchart() {
      //2.初始化
      const chart = echarts.init(this.$refs[this.id]);
      const option = {
        color: this.list.color,
        series: [
          {
            type: "gauge",
            startAngle: 90,
            endAngle: -270,            
            pointer: {
              show: false,
            },
            progress: {
              show: true,
              overlap: false,
              roundCap: true,
              clip: false,
              itemStyle: {
                borderWidth: 1,
                borderColor: "#30C4A3",
              },
            },
            axisLine: {
              lineStyle: {
                width: 10,
                color:[[1,"#25446F"]]
              },
            },
            splitLine: {
              show: false,
              distance: 0,
              length: 10,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
              distance: 50,
            },
            data: [
              {
                value: this.list.percent,
                // name: this.list.seriesData[0].name,
                name:this.list.label,
                title: {
                  offsetCenter: ["0%", "30%"],
                  color: "#fff",
                  fontSize:16,
                },
                detail: {
                  offsetCenter: ["0%", "-15%"],
                  fontSize: 16,
                  color:this.list.color,
                   formatter: "{value}%",
                },
              },
            ],
          },
        ],
      };

      // setInterval(function () {
      //   option.series[0].pointer.show = false;
      //   chart.setOption(option, true);
      // }, 1000);
      chart.setOption(option, true);
    },
  },
};
</script>

<style lang="scss">
.echartBox-wrapper {
  width: 100%;
  height: 100%;
}
</style>